<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--百度地图demo-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>物流地图界面</title>


    <!--引入资源文件-->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/mycss.css}">

    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>

    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=3.0&ak=wd1HTCPciM2cG2soF0NQvn0zwFvWuhjr"></script>
    <script>
       /* $(function () {
            $('#testButton').click(function () {
                $.ajax({
                    type: "get",
                    async: false,
                    url: "showWorkCar",
                    dataType: "json"
                })
            })
        })*/
    </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
    // 创建地图实例
    var map = new BMap.Map("container");

    // 创建点坐标
    var point = new BMap.Point(120.30, 31.57);

    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 9);

    // 开启鼠标缩放
    map.enableScrollWheelZoom(true);

    // 添加百度地图空间，初始化
    map.addControl(new BMap.NavigationControl());

    // 添加控件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用


    // 创建自定已的标注并展示在地图上,标注的图片是一个小车

    function addMarker(point,orderNum){  // 创建图标对象
        var myIcon = new BMap.Icon("static/img/car.jpg", new BMap.Size(52,26),{
            anchor:new BMap.Size(26,26),
            size:new BMap.Size(26,26),
        });
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker);

        var outOrder;
        $.ajax({
            type: 'get',
            async: false,
            url: "outOrderContent_map",
            data:{
                order_num:orderNum
            },
            dataType: 'json',
            success:function (data){
                outOrder = data;
            }
        })

        // 为该空间添加点击事件
        // 创建一个新的窗口
        var myhtml = '<p>\n' +
            '    <span>出库单号'+outOrder.order_num+'</span><br>\n' +
            '    <span>拥有人'+outOrder.holder+'</span><br>\n' +
            '    <span>货物名称'+outOrder.cargo_name+'</span><br>\n' +
            '    <span>货物数量'+outOrder.cargo_amount+'</span><br>\n' +
            '    <span>出库时间'+outOrder.out_time+'</span><br>\n' +
            '    <span>办理人'+outOrder.Wno+'</span>\n' +
            '</p';
        var infoWindow = new BMap.InfoWindow(myhtml,{
            width: 250,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: "出库信息订单",  // 信息窗口标题
        });
        marker.addEventListener("click", function(){
            map.openInfoWindow(infoWindow,point);      // 打开信息窗口
        });

    }

    $.ajax({
        type:'get',
        async:false,
        url:"showWorkCar",
        dataType:"json",
        success:function (data){
            for (let i = 0; i < data.length; i++) {
                var carLocation = new BMap.Point(data[i].lng,data[i].lat);
                addMarker(carLocation,data[i].order_num);
            }
        }
    })

</script>

<p>
    <span></span><br>
</p>
</body>
</html>